<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {useForm} from '@inertiajs/vue3';
import {Message} from "@arco-design/web-vue";
import {route} from "ziggy-js";

// 表单相关
const form = useForm({
    email: 'admin@example.com',
    password: 'test123456',
    captcha: '',
    remember: false,
});

const rules = ref({
    email: [
        { required: true, message: '请输入邮箱', trigger: ['blur'] },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur'] },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: ['blur'] },
        { minLength: 6, maxLength: 16, message: '密码长度6-16位', trigger: ['blur'] },
    ],
    captcha: [{ required: true, message: '请输入验证码', trigger: ['blur'] }],
})

const FormRef = ref()
const isLoading = ref(false)

// 验证码
const captchaSrc = ref(`/captcha/math?t=${Math.random()}`);

// 刷新验证码
const refreshCaptcha = () => {
    captchaSrc.value = `/captcha/math?t=${Math.random()}`;
};

// 表单提交
const submitLogin = async () => {
    const flag = await FormRef.value.validate();
    if (flag) {
        return;
    }

    isLoading.value = true;

    form.post(route('admin.authenticate'), {
        onSuccess: () => {
            Message.success('登录成功');
        },
        onError: (errors) => {
            Message.error('登录失败，请检查您的凭据');
            refreshCaptcha();
            const fields = {} as any;
            // 遍历所有错误
            for (const [fieldName, messages] of Object.entries(errors)) {
                // 构造字段对象
                fields[fieldName] = {
                    status: 'error',
                    message: messages
                };
            }
            FormRef.value.setFields(fields);
        },
        onFinish: () => {
            isLoading.value = false;
        }
    });
};

onMounted(() => {
    refreshCaptcha();
})
</script>

<template>
    <div class="card-login-container">
        <div class="card-container">
            <div class="card-left-panel">
                <div class="card-content">
                    <div class="card-logo">
                        <div class="logo-icon">
                            <svg fill="none" height="28" viewBox="0 0 24 24" width="28" xmlns="http://www.w3.org/2000/svg">
                                <path d="M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.11 21 21 20.1 21 19V5C21 3.9 20.11 3 19 3ZM12 6C13.66 6 15 7.34 15 9C15 10.66 13.66 12 12 12C10.34 12 9 10.66 9 9C9 7.34 10.34 6 12 6ZM18 18H6V16.5C6 14 10 12.9 12 12.9C14 12.9 18 14 18 16.5V18Z" fill="currentColor"/>
                            </svg>
                        </div>
                        <div class="logo-text">
                            <h1>预约收银电商平台</h1>
                            <p>Reservation & POS E-commerce System</p>
                        </div>
                    </div>
                    <p class="system-description">专业的预约管理与智能收银电商平台，提供安全可靠的预约管理和智能收银服务</p>
                    <div class="card-features">
                        <div class="card-feature">
                            <div class="card-icon">
                                <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M19 3H18V1H16V3H8V1H6V3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.11 21 21 20.1 21 19V5C21 3.9 20.11 3 19 3ZM19 19H5V9H19V19ZM19 7H5V5H19V7ZM7 11H12V16H7V11Z" fill="currentColor"/>
                                </svg>
                            </div>
                            <div class="card-text">
                                <h3>预约管理</h3>
                                <p>智能预约排期，灵活时间管理</p>
                            </div>
                        </div>
                        <div class="card-feature">
                            <div class="card-icon">
                                <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.11 21 21 20.1 21 19V5C21 3.9 20.11 3 19 3ZM9 8H11V12H15V14H9V8ZM19 19H5V5H19V19Z" fill="currentColor"/>
                                </svg>
                            </div>
                            <div class="card-text">
                                <h3>智能收银</h3>
                                <p>多渠道支付，实时交易同步</p>
                            </div>
                        </div>
                        <div class="card-feature">
                            <div class="card-icon">
                                <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16 11C17.66 11 18.99 9.66 18.99 8C18.99 6.34 17.66 5 16 5C14.34 5 13 6.34 13 8C13 9.66 14.34 11 16 11ZM8 11C9.66 11 10.99 9.66 10.99 8C10.99 6.34 9.66 5 8 5C6.34 5 5 6.34 5 8C5 9.66 6.34 11 8 11ZM8 13C5.67 13 1 14.17 1 16.5V19H15V16.5C15 14.17 10.33 13 8 13ZM16 13C15.71 13 15.38 13.02 15.03 13.05C16.19 13.89 17 15.02 17 16.5V19H23V16.5C23 14.17 18.33 13 16 13Z" fill="currentColor"/>
                                </svg>
                            </div>
                            <div class="card-text">
                                <h3>客户管理</h3>
                                <p>全方位客户信息，精准服务分析</p>
                            </div>
                        </div>
                    </div>
                    <div class="card-stats">
                        <div class="stat-item">
                            <div class="stat-number">99.8%</div>
                            <div class="stat-label">系统稳定性</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">50K+</div>
                            <div class="stat-label">日处理订单</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">30+</div>
                            <div class="stat-label">支付方式</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-right-panel">
                <div class="card-form-container">
                    <!-- 登录表单 -->
                    <a-form
                        ref="FormRef"
                        :model="form"
                        :rules="rules"
                        class="card-form"
                        layout="vertical"
                        size="large"
                        @submit="submitLogin"
                    >
                        <div class="form-header">
                            <h2>管理员登录</h2>
                            <p class="subtitle">请输入您的管理员账户信息</p>
                        </div>

                        <a-form-item
                            :hide-label="true"
                            field="email"
                            label="邮箱"
                        >
                            <a-input
                                v-model="form.email"
                                allow-clear
                                autocomplete="email"
                                class="input-field"
                                placeholder="请输入邮箱"
                            >
                                <template #prefix>
                                    <icon-email />
                                </template>
                            </a-input>
                        </a-form-item>

                        <a-form-item
                            :hide-label="true"
                            field="password"
                            label="密码"
                        >
                            <a-input-password
                                v-model="form.password"
                                allow-clear
                                autocomplete="current-password"
                                class="input-field"
                                placeholder="请输入密码"
                            >
                                <template #prefix>
                                    <icon-lock />
                                </template>
                            </a-input-password>
                        </a-form-item>

                        <a-form-item
                            :hide-label="true"
                            field="captcha"
                            label="验证码"
                        >
                            <div class="captcha-group flex-1">
                                <a-input
                                    v-model="form.captcha"
                                    allow-clear
                                    autocomplete="off"
                                    class="input-field"
                                    placeholder="请输入验证码"
                                >
                                    <template #prefix>
                                        <icon-safe />
                                    </template>
                                </a-input>

                                <div v-if="captchaSrc" class="captcha-img" title="点击刷新验证码" @click="refreshCaptcha">
                                    <img v-if="captchaSrc" :src="captchaSrc" alt="验证码" />
                                    <div class="captcha-refresh-hint">点击刷新</div>
                                </div>
                            </div>
                        </a-form-item>

                        <div class="form-options">
                            <a-form-item :hide-label="true" class="remember-me" field="remember">
                                <a-checkbox v-model="form.remember">记住登录状态</a-checkbox>
                            </a-form-item>
                        </div>

                        <a-form-item :hide-label="true">
                            <a-button
                                :disabled="isLoading"
                                :loading="isLoading"
                                class="card-submit-btn"
                                html-type="submit"
                                long
                                size="large"
                                type="primary"
                            >
                                {{ isLoading ? '登录中...' : '登录' }}
                            </a-button>
                        </a-form-item>

                        <div class="form-footer">
                            <div class="version-info">v3.2.0 © 2023 预约收银电商平台</div>
                        </div>
                    </a-form>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.card-login-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    height: 720px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.05);
}

.card-left-panel {
    flex: 1;
    background: linear-gradient(135deg, rgba(15, 27, 58, 0.95) 0%, rgba(30, 60, 114, 0.9) 100%);
    color: white;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.card-left-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.03" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,192C1248,192,1344,128,1392,96L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>'),
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 20%);
    background-size: cover, 200% 200%, 200% 200%;
    background-position: bottom, 0 0, 100% 100%;
    z-index: 1;
}

.card-content {
    position: relative;
    z-index: 2;
}

.card-logo {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    animation: fadeInUp 0.8s ease;
}

.logo-icon {
    width: 60px;
    height: 60px;
    background: rgba(66, 133, 244, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: white;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(66, 133, 244, 0.3);
}

.logo-text h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.logo-text p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0;
    font-weight: 400;
}

.system-description {
    font-size: 1.05rem;
    opacity: 0.9;
    margin-bottom: 40px;
    max-width: 90%;
    line-height: 1.6;
}

.card-features {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 50px;
}

.card-feature {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: transform 0.3s ease;
}

.card-feature:hover {
    transform: translateX(5px);
}

.card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(66, 133, 244, 0.15);
    border-radius: 10px;
    flex-shrink: 0;
    color: white;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(66, 133, 244, 0.25);
}

.card-text h3 {
    margin: 0 0 6px 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.card-text p {
    margin: 0;
    opacity: 0.8;
    font-size: 0.9rem;
    line-height: 1.4;
}

.card-stats {
    display: flex;
    justify-content: space-between;
    max-width: 90%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 5px;
    background: linear-gradient(135deg, #fff, #c2e0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    font-size: 0.85rem;
    opacity: 0.8;
}

.card-right-panel {
    flex: 1;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}

.card-form-container {
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
}

.form-header {
    text-align: center;
    margin-bottom: 40px;
}

.card-form h2 {
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: #1e3c72;
    font-weight: 700;
}

.subtitle {
    color: #666;
    margin-bottom: 0;
    font-size: 0.95rem;
}

.input-field {
    border-radius: 10px;
    transition: all 0.3s ease;

    &:focus-within {
        box-shadow: 0 0 0 2px rgba(30, 60, 114, 0.2);
    }
}

.captcha-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

.captcha-img {
    width: 130px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    transition: all 0.3s ease;

    &:hover {
        border-color: #1e3c72;

        .captcha-refresh-hint {
            opacity: 1;
        }
    }
}

.captcha-img img {
    height: 100%;
    width: auto;
}

.captcha-refresh-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(30, 60, 114, 0.8);
    color: white;
    font-size: 0.7rem;
    text-align: center;
    padding: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.remember-me {
    margin-bottom: 0;
}

.forgot-password {
    font-size: 0.9rem;
    color: #1e3c72;
}

.card-submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 48px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(30, 60, 114, 0.3);

    &:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(30, 60, 114, 0.4);
        background: linear-gradient(135deg, #2a5298, #3a6bc2);
    }

    &:active {
        transform: translateY(0);
    }
}

.form-footer {
    text-align: center;
    margin-top: 30px;
    color: #666;
    font-size: 0.9rem;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}

.version-info {
    margin-top: 15px;
    font-size: 0.8rem;
    color: #999;
}

/* 动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式设计 */
@media (max-width: 992px) {
    .card-container {
        max-width: 95%;
        height: auto;
        min-height: 90vh;
    }

    .card-left-panel, .card-right-panel {
        padding: 40px 30px;
    }
}

@media (max-width: 768px) {
    .card-container {
        flex-direction: column;
        height: auto;
        width: 95%;
        margin: 20px auto;
        border-radius: 15px;
    }

    .card-left-panel {
        padding: 40px 30px;
    }

    .card-right-panel {
        padding: 40px 30px;
    }

    .card-stats {
        max-width: 100%;
    }

    .card-logo {
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }

    .logo-icon {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .captcha-group {
        flex-direction: column;
        align-items: stretch;
    }

    .captcha-img {
        width: 100%;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .card-left-panel, .card-right-panel {
        padding: 30px 20px;
    }

    .card-stats {
        flex-direction: column;
        gap: 20px;
    }

    .form-options {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
}
</style>
